<template>
	<view class="fun-flex-col fun-justify-between page">
		<view class="fun-flex-col section">
			<image class="login-text" src="@/static/login/login_text.png" />
			<view class="fun-flex-col box">
				<view class="fun-flex-col section_2">
					<text class="text_2">Sign Up</text>
					<text class="font text_3">Username</text>
					<view class="fun-flex-col text-wrapper">
						<input class="font_2 text_4" v-model="form.username" maxlength="12" placeholder="Enter your username" type='text'/>
					</view>
					
					<text class="font text_5">Password</text>
					<view class="fun-flex-row fun-justify-between fun-items-center section_4">
						<input class="font_3 text_11" v-model="form.password" maxlength="20" placeholder="Enter your password" type='text':password='!isShowWord'/>
						<image class="image_eye" v-if='isShowWord' src="@/static/login/eye.png" @click="isShowWord = false"/>
						<image class="image_10" v-if='!isShowWord' src="@/static/login/eye_off.png" @click="isShowWord = true" />
					</view>
					
					<text class="font text_7">Repeat Password</text>
					<view class="fun-flex-row fun-justify-between fun-items-center section_4">
						<input class="font_3 text_11" v-model="form.repeatPassword" maxlength="20" placeholder="Repeat your password" type='text' password/>
						<image class="image_10" src="@/static/login/gou.png" v-show='form.password === form.repeatPassword'/>
					</view>
					
					<text class="fun-self-start font text_8">Verification Code</text>
					<view class="fun-flex-row fun-justify-between fun-items-end verify">
						<input class="font_3 text_11" v-model="form.captcha" placeholder="Enter the verification code" type="text"/>
						<image class="image_11" :src="captchaImg" @click="getCaptcha"/>
					</view>
					
					<text class="fun-self-start font text_10">Referral Code</text>
					<view class="fun-flex-col fun-justify-start fun-items-start  text-wrapper">
						<input class="font_2 text_11" v-model="form.promotionCode" :disabled="isCodeDisabled" placeholder="Enter Referral Code" type="text"/>
					</view>
					
					<view class="fun-flex-row fun-items-center group_4">
						<checkbox-group @change="changeBox">
							<label class="fun-flex-row fun-items-center">
								<checkbox value="remember" borderColor="#000000" activeBackgroundColor="#1A7B99" activeBorderColor="#fff" color="#fff" style="transform:scale(0.75)" />
								<view class="group_5 fun-flex-row fun-items-center">By signing up you are agree to our<text class="text_13">terms & services.</text></view>
							</label>
						</checkbox-group>
					</view>
					<view class="text-wrapper_2"  @click="signUp">Sign UP</view>
				</view>
			</view>
		</view>
		
		<view class="fun-flex-row fun-justify-center">
			<text class="font_4 text_15">Already have an account?</text>
			<text class="font_4 text_16" @click="signIn">Sign In</text>
		</view>
	</view>
</template>

<script>
	import {register,getCaptcha} from "@/api/common.js"
	export default {
		components: {},
		props: {},
		data() {
			return {
				checkVal:"",
				isShowWord:false,
				form:{
					username:"",
					password:"",
					repeatPassword:"",
					promotionCode:"",
					captcha_id:"",
					captcha:""
				},
				isCodeDisabled:false,
				captchaImg:""
			};
		},
		onLoad(option) {
			console.log(option,"lololo")
			this.form.promotionCode = option.code || ""
			this.isCodeDisabled = this.form.promotionCode ? true : false;
			this.getCaptcha();
		},

		methods: {
			getCaptcha(){
				getCaptcha().then(res => {
					if(res.code == 0){
						this.captchaImg = this.COFIG?.staticUrl + res.data?.img;
						this.form.captcha_id = res.data?.cptid;
					}
					else{
						this.form.captcha = "";
						this.form.captcha_id = "";
						this.UTILS.logStr(res.msg || "获取验证码失败")
					}
				})
			},
			signUp(){
				const {username,password,repeatPassword,promotionCode,captcha} = this.form;
				if(!username){
					this.UTILS.logStr("Enter your username");
					return
				}
				if(username.length < 6){
					this.UTILS.logStr("The username must be 6-12 characters long");
					return 
				}
				if(!password){
					this.UTILS.logStr("Enter your password");
					return
				}
				if(password.length < 6){
					this.UTILS.logStr("The password must be 6-12 characters long");
					return
				}
				if(!repeatPassword){
					this.UTILS.logStr("Repeat your password");
					return
				}
				if(password !== repeatPassword){
					this.UTILS.logStr("Two passwords are inconsistent");
					return
				}
				if(!captcha){
					this.UTILS.logStr("Enter the verification code");
					return
				}
				if(getApp().globalData.regMustProxyCode == 1 && !this.promotionCode){
					this.UTILS.logStr("Enter Referral Code");
					return
				}
				if(!this.checkVal){
					this.UTILS.logStr("you are agree to our terms & services");
					return
				}
				this.submitRegister()
			},
			
			submitRegister(){
				register(this.form).then(res => {
					if(res.code == 0){
						uni.navigateTo({
							url:'/pages/login/success?tips=You have successfully registered.&btnText=Sign In Now&backUrl=/pages/login/login',
						})
					}
					else{
						this.getCaptcha()
						this.UTILS.logStr(res.msg || "sign up Failed")
					}
				})
			},
			
			changeBox(ev){
				this.checkVal = ev.detail.value[0]
			},
			signIn(){
				uni.navigateTo({
					url:'/pages/login/login',
					nimationType: 'pop-in',
					animationDuration: 200
					
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 52rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.section {
			background-image: url('../../static/login/login_bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding-top: 80rpx;
			.login-text {
				margin: 0 auto;
				width: 374rpx;
				height: 68rpx;
			}
			.box{
				padding: 0 32rpx;
				margin-bottom: 48rpx;
				
				.section_2 {
					padding: 40rpx 32rpx 48rpx;
					margin-top: 80rpx;
					background-color: #ffffff;
					border-radius: 16rpx;
					box-shadow: 0rpx 4rpx 27.6rpx #00000026;
					.text_2 {
						color: #121212;
						font-size: 40rpx;
						font-family: SF Pro Display;
					}
					.font {
						font-size: 32rpx;
						font-family: SF Pro Display;
						letter-spacing: -0.32rpx;
						color: #3e3e3e;
					}
				
					.text_3 {
						margin-top: 32rpx;
					}
					
					.text_11 {
						width: 100%;
					}
				
					.text-wrapper {
						margin-top: 16rpx;
						padding: 20rpx 0;
						background-color: #ffffff;
						border-bottom: solid 2rpx #1a7b99;
						.font_2 {
							font-size: 32rpx;
							font-family: SF Pro Display;
							letter-spacing: -0.32rpx;
						}
				
						.text_4 {
							color: #121212;
							letter-spacing: unset;
							flex: 1;
						}
				
						
					}
				
					.text_5 {
						margin-top: 24rpx;
					}
				
					.section_4 {
						margin-top: 16rpx;
						padding: 20rpx 0;
						background-color: #ffffff;
						border-bottom: solid 2rpx #1a7b99;
						.image_10 {
							width: 40rpx;
							height: 40rpx;
						}
						.image_eye {
							width: 44rpx;
							height: 44rpx;
						}
						
					}
					.verify{
						margin-top: 16rpx;
						background-color: #ffffff;
						border-bottom: solid 2rpx #1a7b99;
						input{
							flex:1;
							padding: 20rpx 0;
						}
						.image_11 {
							background: rgba(26, 123, 153, 0.2);
							width: 200rpx;
							height: 80rpx;
						}
					}
					.text_7 {
						margin-top: 24rpx;
					}
				
				
					.text_8 {
						margin-top: 24rpx;
					}
				
					.font_3 {
						font-size: 32rpx;
						font-family: Poppins;
						letter-spacing: -0.32rpx;
						color: #121212;
					}
				
					.text_10 {
						margin-top: 24rpx;
					}
				
					.group_4 {
						padding: 32rpx 0;
						.group_5 {
							letter-spacing: -0.2rpx;
							color: #7f7f7f;
							font-size: 24rpx;
							font-family: SF Pro Display;
							.text_13 {
								text-indent:8rpx;
								color: #175bae;
								font-weight: 700;
							}
						}
					}
				
					.text-wrapper_2 {
						padding: 24rpx 0;
						background-color: #1a7b99;
						border-radius: 8rpx;
						color: #ffffff;
						font-size: 28rpx;
						font-family: SF Pro Display;
						font-weight: 700;
						text-align: center;
					}
				}
			}
		}
		.font_4 {
			font-size: 28rpx;
			font-family: SF Pro Display;
		}

		.text_15 {
			color: #7f7f7f;
		}

		.text_16 {
			color: #1a7b99;
			margin-left: 16rpx;
		}
	}
</style>